<template>
  <el-image class="picture" lazy v-bind="$attrs">
    <template #placeholder>
      <i v-if="isLogin" class="fas fa-user-circle"></i>
      <i v-else class="fas fa-image"></i>
    </template>
    <template #error>
      <i v-if="isLogin" class="fas fa-user-circle"></i>
      <i v-else class="fas fa-image"></i>
    </template>
  </el-image>
</template>

<script lang="ts" setup>
defineProps({
  isLogin: {
    type: Boolean,
    default: false,
  },
});
</script>

<style lang="scss" scoped>
.picture {
  @apply flex justify-center items-center;
}
</style>
